<template>
    <div class="actionBar">
        <div>
            <el-button class="blackBg" v-if="options.shuaxinDisplay" @click="loadBtnClick"><i
                    class="iconfont icon-shuaxin1"></i></el-button>
            <el-button class="actionBarbg" v-if="options.addDisplay" @click="addBtnClick"><i
                    class="iconfont icon-add-s"></i>添加</el-button>
            <el-button class="actionBarbg" v-if="options.editDiaplay" @click="editBtnClick"
                :disabled="options.editDisabled"><i class="iconfont icon-tianxie"></i>编辑</el-button>
            <el-button type="danger" v-if="options.removeDisplay" @click="removeBtnClick" :disabled="options.disabled"><i
                    class="iconfont icon-shanchu"></i>删除</el-button>
            <div></div>
        </div>
        <div>
            <el-button class="btnbg" v-if="options.caozuoDisplay" @click="caozuoBtnClick"><i
                    class="iconfont icon-caozuo-heng"></i></el-button>
            <el-button class="btnbg" v-if="options.qiehuanDisplay" @click="qiehuanBtnClick"><i
                    class="iconfont icon-qiehuan"></i></el-button>
            <el-button class="btnbg" v-if="options.daochuDisplay" @click="excelClick"><i
                    class="iconfont icon-daochu"></i></el-button>
            <el-button class="btnbg" v-if="options.sousuoDisplay" @click="sousuoBtnClick"><i
                    class="iconfont icon-sousuo"></i></el-button>
            <div></div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    options: Object
})
const emit = defineEmits(['loadClick', 'addClick', 'editClick', 'removeClick', 'daochuClick'])
const loadBtnClick = () => {
    emit('loadClick')
}
const addBtnClick = () => {
    emit('addClick')
}
const editBtnClick = () => {
    emit('editClick')
}
const removeBtnClick = () => {
    emit('removeClick')
}
const caozuoBtnClick = () => {
    emit('caozuoClick')
}
const qiehuanBtnClick = () => {
    emit('qiehuanClick')
}
const sousuoBtnClick = () => {
    emit('souauoClcik')
}
const excelClick = () => {
    emit('daochuClick')
}
</script>

<style lang="less" scoped>
.actionBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.actionBarbg {
    background-color: #3CB731;
    color: #fff;
}

.redColor {
    background-color: #f75444;
    color: #ffffff;
}

.iconfont {
    font-size: 12px;
}

.btnbg {
    background-color: #f0f0f0;
}

.blackBg {
    background-color: #24303c;
    color: #fff;
}

:deep(.el-button) {
    padding: 2px 6px;
    letter-spacing: 2px;
    font-size: 12px;
}
</style>
